
<template>
    <!-- 超声波设备新增 -->
	<el-dialog
		:title="`${newForm.id?'编辑':'添加'}设备`"
		width="500px"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		destroy-on-close
		append-to-body
		@close="closeAction"
		:visible="visible"
	>
		<el-form ref="newForm" :model="newForm" :label-width="150+'px'">
			<el-form-item label="所属单位：">
		    	{{unit.name}}
		  	</el-form-item>
			<el-form-item label="所属分组：">
		    	{{group.name}}
		  	</el-form-item>
			<el-form-item label="设备名称：" prop="name" :rules="[{ required: true, message: '请输入设备名称', trigger: 'change' }]">
		    	<el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
		  	</el-form-item>
			<el-form-item label="设备编号：" prop="number" :rules="[{ required: true, message: '请输入设备编号', trigger: 'change' }]">
		    	<el-input placeholder="请输入" v-model.trim="newForm.number"></el-input>
		  	</el-form-item>
			<el-form-item label="传输装置编码：" prop="number" :rules="[{ required: true, message: '请输入传输装置编码', trigger: 'change' }]">
		    	<el-input placeholder="请输入" v-model.trim="newForm.transDeviceCode"></el-input>
		  	</el-form-item>
			<el-form-item label="设备类型：" prop="deviceType" :rules="[{ required: true, message: '请选择设备类型', trigger: 'change' }]">
		    	<el-select class="full" v-model="newForm.deviceType" placeholder="请选择">
			      	<el-option :label="item.name" :value="item.id" v-for="(item, key) in typeList" :key="key"></el-option>
			    </el-select>
		  	</el-form-item>
			<el-form-item label="产品：" prop="productId" :rules="[{ required: true, message: '请选择产品', trigger: 'change' }]">
		    	<el-select class="full" v-model="newForm.productId" placeholder="请选择">
			      	<el-option :label="item.name" :value="item.id" v-for="(item, key) in productList" :key="key"></el-option>
			    </el-select>
		  	</el-form-item>
			<el-form-item label="安装位置：" prop="position" :rules="[{ required: true, message: '请输入安装位置', trigger: 'change' }]">
		    	<el-input placeholder="请输入" v-model.trim="newForm.position"></el-input>
		  	</el-form-item>
			<el-form-item label="安装时间：" prop="installtime" :rules="[{ required: true, message: '请选择安装时间', trigger: 'change' }]">
		    	<el-date-picker
		  			v-model="newForm.installtime"
		  			placeholder="请选择"
					type="datetime"
					value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
		  	</el-form-item>
			<el-form-item label="经纬度：" prop="lon" :rules="[{ required: true, message: '请选择经纬度', trigger: 'change' }]">
		    	<div class="flex">
		  			<div class="flex-1 mr-10">
		  				<el-input readonly placeholder="经纬度" type="text" :value="coord"></el-input>
		  			</div>
		  			<div>
		  				<el-button type="green" @click="locateAction">定位</el-button>
		  			</div>
		  		</div>
		  	</el-form-item>
		</el-form>
        <div slot="footer">
            <el-button type="cancel" @click="closeAction">取消</el-button>
            <el-button type="primary" :loading="loading" @click="submitAction">确定</el-button>
        </div>
		<!-- 定位 start -->
		<el-dialog v-if="locationModalVisible" title="定位" :visible.sync="locationModalVisible" width="800px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close append-to-body>
			<Location 
				ref="location"
				:coord="coord"
	    		@save="saveLocation"
	    		@cancel="locationModalVisible=false"
	    	>
	    	</Location>
		</el-dialog>
		<!-- 定位 end -->
	</el-dialog>
</template>
<script>
import Location from '@/components/census/record/Location.vue'
export default {
	name: 'newEquipment',
	components: {
		Location
	},
	props: {
		activeData: {
			type: Object,
			default(){
				return null
			},
		},
		unit: {
			type: Object,
			default(){
				return {}
			},
		},
		group: {
			type: Object,
			default(){
				return {}
			},
		},
		deviceClassify: {
			type: String,
			default: ''
		},
        visible:{
            type:Boolean
        }
	},
	computed: {
		coord () {
			if(this.newForm.lon){
				return this.newForm.lon + ',' + this.newForm.lat
			}
		},
	},
	watch: {
		activeData () {
			this.initForm()
		},
	},
	data () {
		return {
			newForm: {},
			loading: false,
			functionList:[],
			platformList: [],
			productList: [],
			locationModalVisible: false,
			fileList: [],
			previewImageUrl: '',
			previewVisible: false,
			newVideoVisible: false,
			newVideo: '',
			videos: [''],
			typeList:[],
		}
	},
	methods: {
        closeAction() {
            this.$emit("update:visible", false);
        },
		getType () {
			this.$get('/fireFightingIOT/device/deviceTypeList',{type:this.deviceClassify}).then(res => {
            	this.typeList = res.data
            }, (err) =>{
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		initForm () {
			if(this.activeData){
				// this.newForm = this.utils.pick(this.activeData,['id','businessId','businessName','deviceClassify','img','lon','lat','name','number','position','ip','post','username','password','channelNumber','model','platformId','function','videoplayAddrs','installtime','productId','alarmPhone','installperson','installpersonPhone','remark']) //Object.assign({},this.activeData)
				this.newForm = this.utils.pick(
                    this.activeData,
                    ['id','businessId','groupId','deviceClassify','lon','lat','name','number','position','installtime','productId','transDeviceCode','deviceType']
                ) //Object.assign({},this.activeData)
				
			}else{
				this.newForm = {
					businessId: this.unit.id,
					deviceClassify: this.deviceClassify,
                    groupId: this.group.id,
					img: '',
					lon: '',
					lat: ''
				}
				if(this.$refs['newForm']){
					this.$refs['newForm'].resetFields()
				}
			}
		},
		getFunction () {
			this.$get('/fireFightingIOT/device/functionList').then(res => {
            	this.functionList = res.data
            }, (err) =>{
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		getPlatform () {
			this.$get('/fireFightingIOT/device/platformList').then(res => {
            	this.platformList = res.data
            }, (err) =>{
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		getProduct () {
			this.$get('/fireFightingIOT/device/productList',{type:this.deviceClassify}).then(res => {
            	this.productList = res.data
            }, (err) =>{
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		locateAction () {
			this.locationModalVisible = true
		},
		saveLocation (coord) {
			this.newForm.lon = coord[0]
			this.newForm.lat = coord[1]
			this.locationModalVisible = false
		},
		handlePictureCardPreview (file) {
			this.previewImageUrl = file.url;
        	this.previewVisible = true;
		},
		handleUploadSuccess (res, file) {
			this.fileList.push({name: res.data.fileName,url:res.data.filePath})
			
		},
		handleRemove (file, fileList) {
			this.fileList = fileList.map(item=>{
				return {name: item.name,url: item.url}
			})
		},
		confirmNewVideo () {
			if(!this.newVideo){
				this.$message.error('请输入视频地址')
				return
			}
			this.videos.push(this.newVideo)
			this.newVideoVisible = false
			this.newVideo = ''
		},
		deleteVideo (item,index) {
			this.showConfirm ('确定删除该视频地址吗？',()=>{
				this.videos.splice(index,1)
				// this.newForm.isDel = '1'
			})
		},
		submitAction () {
			this.$refs['newForm'].validate((valid) => {
				if (valid) {
					this.loading = true
					let params = Object.assign({},this.newForm)
					this.$ajax({
						url: '/fireFightingIOT/ultrasonic/ultrasonicDeviceAddOrUpdate',
						method: 'post',
						data: params
					}).then( data => {
						this.loading = false
						this.$message.success('保存成功')
                        this.closeAction()
						this.$emit('success');
					}, error => {
						this.loading = false
						this.$message.error(error.msg);
					})
				} else {
					return false;
				}
			});
		},
	},
	created () {
		// this.getFunction()
		// this.getPlatform()
		this.getProduct()
		this.initForm()
		this.getType()
	},
}
</script>